<script>
    import { findEnumOptions, chineseToPinyin } from '@/api/common.js'
    export default {
        name: 'FormModal',
        components: {},
        props: {
            id: String,
            orderNum: Number,
            rowData: Object,
            title: {
                type: String,
                default: '',
            },
        },
        data() {
            return {
                formData: {
                    name: this.$props.rowData?.name || null,
                    property: this.$props.rowData?.property || null,
                    dataType: this.$props.rowData?.dataType || '',
                    // orderNum: this.$props.rowData?.orderNum || 1,
                    orderNum: this.$props.orderNum,
                    master: this.$props.rowData?.master || false,
                    point: this.$props.rowData?.point || null,
                    tags: this.$props.rowData?.tags || null,
                    unit: this.$props.rowData?.unit || null,
                    calculationRule: this.$props.rowData?.calculationRule || null,
                    id: this.$props.rowData?.id,
                },
                rules: {
                    name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
                    dataType: [{ required: true, message: '请输入数据类型', trigger: 'change' }],
                    orderNum: [{ required: true, message: '请输入顺序', trigger: 'blur' }],
                    master: [{ required: true, message: '请选择', trigger: 'change' }],
                    point: [{ required: true, message: '请输入测点', trigger: 'blur' }],
                    property: [{ pattern: /^\D/, message: '第一位不能为数字' }],
                    tags: [{ required: true, message: '请选择标签', trigger: 'blur' }],
                },
                dataTypeList: [],
                tagList: [],
            }
        },
        created() {
            this.initSetModal()

            if (this.$props.rowData) {
                chineseToPinyin(this.$props.rowData.name).then((res) => {
                    this.$props.rowData.property = res.data
                })
            }
            findEnumOptions('dataType').then((result) => {
                this.dataTypeList = result.data || []
            })
            findEnumOptions('meterTypePropertyTag').then((result) => {
                this.tagList = result.data || []
            })
            //弹窗初始化信息
        },
        mounted() {},
        methods: {
            /**
             * @name: initSetModal
             * @msg: 初始化设置modal弹窗属性
             * @return {*}
             */
            initSetModal() {
                this.$emit('SetTitle', this.$props.title)
                this.$emit('SetPageWidth', 600)
                this.$emit('SetPageActions', [
                    {
                        text: '保存',
                        theme: 'primary',
                        handle: () => {
                            this.submitForm()
                        },
                        loading: false,
                    },
                    {
                        text: '取消',
                        theme: 'default',
                        handle: () => {
                            this.$emit('Close')
                        },
                    },
                ])
            },

            /**
             * @name: submitForm提交form表单数据
             * @msg:
             * @return {*}
             */
            submitForm() {
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        this.sendAddRequestFun()
                    }
                })
            },
            /**
             * @name: 新增请求
             * @test: test font
             * @msg:
             * @return {*}
             */
            sendAddRequestFun() {
                this.$emit('Close', this.formData)
            },
            changeName() {
                chineseToPinyin(this.formData.name).then((res) => {
                    this.formData.property = res.data
                })
            },
        },
    }
</script>
<template>
    <div>
        <el-form label-position="top" :model="formData" :rules="rules" ref="ruleForm">
            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="名称" prop="name">
                        <el-input
                            placeholder="请输入"
                            v-model="formData.name"
                            clearable
                            @blur="changeName"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="属性" prop="property">
                        <el-input placeholder="请输入" v-model="formData.property" clearable />
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <el-form-item label="数据类型" prop="dataType">
                        <el-select
                            placeholder="请选择"
                            clearable
                            style="width: 100%"
                            v-model="formData.dataType"
                        >
                            <el-option
                                v-for="item in dataTypeList"
                                :key="item.code"
                                :value="item.code"
                                :label="item.name"
                                >{{ item.name }}</el-option
                            >
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="排序" prop="orderNum">
                        <el-input
                            type="number"
                            disabled:false
                            placeholder="请输入"
                            v-model="formData.orderNum"
                            clearable
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="测点" prop="point">
                        <el-input placeholder="请输入" v-model="formData.point" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="单位" prop="unit">
                        <el-input placeholder="请输入" v-model="formData.unit" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="计算规则表达式">
                        <el-input
                            placeholder="请输入"
                            v-model="formData.calculationRule"
                            clearable
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="是否为计量属性" prop="master">
                        <el-radio-group v-model="formData.master">
                            <el-radio :label="true">是</el-radio>
                            <el-radio :label="false">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="标签">
                        <el-select
                            placeholder="请选择"
                            clearable
                            style="width: 100%"
                            v-model="formData.tags"
                            multiple
                        >
                            <el-option
                                v-for="item in tagList"
                                :key="item.code"
                                :value="item.code"
                                :label="item.name"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<style lang="scss" scoped>
    ::v-deep .el-input-number .el-input__inner {
        text-align: left;
    }
</style>
